<template>
  <div class="father">
    <div class="head">
      <div class="search">
        <div class="item">
          <div class="item1">
            <img src="@/assets/tenlogo.jpg" width="100%" height="100%" opacity="0">
          </div>
          <div class="item2">
            <router-link to="/r_search" width="100%" height="100%">
              <el-input
                :placeholder= "placeholders"
                prefix-icon="el-icon-search"
                v-model="input">
              </el-input>
            </router-link>
          </div>
          <div class="item3">
            <router-link to="/messages">
              <img src="@/assets/信息-01.png" alt="信息" width="100%" height="100%" opacity="0.5">
            </router-link>
          </div>
        </div>
      </div>
      <div class="tabbar">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" text-color="#000" active-text-color="red" router>
          <el-menu-item index="/real" class="el">华为</el-menu-item>
          <el-menu-item index="/h_walk" class="el">鸿蒙智行</el-menu-item>
          <el-menu-item index="/h_select" class="el">华为智选</el-menu-item>
          <el-menu-item index="/environment" class="el">生态周边</el-menu-item>
        </el-menu>
      </div>
    </div>
    <transition name="fade">
      <div class="body">
        <div class="wrapper1">
          <div v-for="(item,index) in goods" :key="index" class="wrapper-item">
            <router-link :to="item.to">
              <img :src="item.src" class="item-index">
            </router-link>
        </div>
        <div class="wrapper2">
          <div v-for="(item,index) in messages" :key="index" class="wrapper-item2">
          <router-link :to="item.to" tag="span">
            <h3>{{ item.title }}</h3>
            <span v-for="(item1,index1) in item.items" :key="index1">
              {{ item1 }}
            </span>
          </router-link>
        </div>
        </div>
        </div>
      </div>
    </transition>
    <div class="hello_world">
      <button class="top" @click="toTop">
        <img src="@/assets/backToTop.png" width="100%">
      </button>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'h_walk',
  data () {
    return {
      activeIndex: '/h_walk',
      count: 0,
      placeholders: '微泵液冷手机壳',
      data: ['微泵液冷手机壳', 'FreeBuds Pro 3', '平板', 'mate60', '微泵', '手机', 'gt 4', '充电宝', 'p60', '乐臻版'],
      goods: [{ src: 'https://res.vmallres.com/cmscdn/CN/2023-11/c405871016ae4d588c2210bad49dcc3d.jpg.webp', to: '/z_seven' },
        { src: 'https://res.vmallres.com/cmscdn/CN/2023-11/654947951d9c414eb534d44d8a8dad22.jpg.webp', to: '/w_seven' },
        { src: 'https://res.vmallres.com/cmscdn/CN/2023-09/7e03a319c16b472180d23f9c1ee036d5.jpg.webp', to: '/w_five' },
        { src: 'https://res.vmallres.com/cmscdn/CN/2023-09/b9542c0b03f04f6588b183857a0702ca.jpg.webp', to: '/w_e_five' },
        { src: 'https://res.vmallres.com/cmscdn/CN/2023-09/50a68ce17c63413f80fd7859019b63e2.jpg.webp', to: 'w_five' },
        { src: 'https://res.vmallres.com/cmscdn/CN/2023-09/38a2827bfb304a52b18223aee4b922d9.jpg.webp', to: 'w_e_five' },
        { src: 'https://res.vmallres.com/cmscdn/CN/2023-09/4767015226a0480c982ad795bc252795.jpg.webp', to: '/w_nine' },
        { src: 'https://res.vmallres.com/cmscdn/CN/2023-09/a2287b2adbd446baa37302f3ca52dae5.jpg.webp', to: '/w_seven' }],
      messages: [{ title: '智界S7', items: ['S7Pro', 'S7Max', 'S7Max+', 'S7Max RS'], to: '/z_seven' },
        { title: '问界M7系列', items: ['新M7大五座', '新M7享六座', 'M7'], to: '/w_seven' },
        { title: '问界M5系列', items: ['M5智驾版', 'M5标准版', 'M5'], to: '/w_five' },
        { title: '问界M5纯电系列', items: ['M5纯电版', 'M5纯电标准版', 'M5纯电智驾版'], to: '/w_e_five' },
        { title: '问界M9系列', items: ['M9增程版', 'M9纯电版'], to: '/w_nine' }]
    }
  },
  methods: {
    handleSelect (key, keyPath) {
      console.log(key)
      console.log(keyPath)
    },
    getMenu () {
      this.$indicator.open({
        text: '加载中'
      })
    },
    toTop () {
      window.location.reload()
    }
  },
  created () {
    this.getMenu()
  },
  mounted () {
    setInterval(() => {
      this.count++
      if (this.count > this.data.length - 1) {
        this.count = 0
      }
      this.placeholders = this.data[this.count]
    }, 2000)
    this.$nextTick(() => {
      // eslint-disable-next-line no-undef
      this.scroll = new BScroll('.body', {
        click: true,
        mouseWheel: true
      })
    })
  }
}
</script>

<style scoped>
.top{
  position: absolute;
  width: 40px;
  height: 40px;
  bottom: 100px;
  right: 5px;
  background-color: #fff;
  border: solid 1px gray;
  border-radius: 50%;
}
.father{
  width: 450px;
  height: 100%;
  background-color: #fff;
}
.head{
  height: 15%;
  background-color:aqua;
}
.body{
  height: 537px;
  width: 450px;
  overflow: hidden;
  background-color: #fff;
}
.search{
  height: 60%;
  width: 100%;
  background-color: #2b4b6b;
}
.tabbar{
  height:40%;
  width: 100%;
}
.el{
  width: 25%;
}
.fade-enter{
  opacity: 0;
  transform: translateX(100%);
}
.fade-leave-to{
  opacity: 0;
  transform: translateX(-100%);
  position: absolute;
}
.fade-enter-active, .fade-leave-active {
  transition: all .5s ease;
}
.item{
  display: flex;
  height: 100%;
  background-color:#fff;
}
.item1{
  width: 30%;
  background: #fff;
}
.item2{
  width: 60%;
  padding-top: 10px;
}
.item3{
  padding: 10px;
  width: 10%;
  margin-top: 5px;
}
.item-index{
  width: 100%;
  height: 100%;
}
.wrapper-item2{
  height:100px;
  width:450px;
  border: 1px solid grey;
  border-radius: 10%;
}
.wrapper2{
  border: 1px solid gray;
}
</style>
